<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
let count = 0
let setTime = null
let websockt = null
import { getUserInfo, getStatus, setStatus, removeStatus } from '@/utils/auth'
import { getDatas } from '@/api/msg'
export default {
  name: 'App',
  created() {
    removeStatus()
    const _this = this
    setInterval(() => {
      if (getUserInfo()?.id && !getStatus()) {
        console.log('开始链接')
        setStatus(1)
        _this.initWebSocket(getUserInfo()?.id)
      }
    }, 1000)
  },
  methods: {
    initWebSocket(userId) { // 初始化weosocket
      const wsuri = `ws://192.168.0.6:6543/backup/web/websocket/${userId}`
      // const wsuri = 'ws://' + location.host + `/backup/web/websocket/${userId}`// 这个必须域名连接，否则跨域,域名连接不上就服务器转两次就好了
      websockt = new WebSocket(wsuri)
      websockt.onmessage = this.websocketonmessage
      websockt.onopen = this.websocketonopen
      websockt.onerror = this.websocketonerror
      websockt.onclose = this.websocketclose
    },
    websocketonerror() { // 连接建立失败重连
      const _this = this
      setTime = setTimeout(() => {
        if (count < 5) {
          _this.initWebSocket(getUserInfo()?.id)
          _this.$message.warning('服务断开,重新连接中。。。')
          count++
        }
      }, 1000)
    },
    websocketonmessage(e) { // 数据接收
      const _this = this
      if (e.data === '连接成功') {
        getDatas({ isRead: 0, messageType: 3 }).then(res => {
          _this.$store.dispatch('msg/setMegnum', res.data.total)
        })
        _this.$message.success('消息通道已开启')
        return
      }
      const data = JSON.parse(e.data)
      console.log(data)
      if (data.messageType * 1 === 3) {
        _this.$notify({
          title: '消息提示',
          type: 'warning',
          message: data?.messageInfo
        })
        _this.$store.dispatch('msg/addMsg', data)
        _this.$store.dispatch('msg/addMegnum', 1)
        return
      }
      /** 接受服务器消息*/
      _this.$store.dispatch('msg/addMsg', data)
    },
    websocketclose() {
      if (count > 4) {
        this.$message.error('服务断开且不再重连，请手动刷新或重登！！！')
      }
      console.log('断开连接')
    },
    websocketonopen() {
      count = 0
      clearInterval(setTime)
      console.log('socket服务正常')
    }
  }
}
</script>
<style lang="scss">
.el-switch__label * {
  font-size: 12px;
}
.el-tree {
  display: inline-block;
  min-width: 160px;
  .el-tree-node::before {
    content: '';
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -26px;
    border-width: 1px;
    border-left: 1px dashed #c8c9cc;
  }

  // 当前层最后一个节点的竖线高度固定
  .el-tree-node:last-child::before {
    height: 38px; // 可以自己调节到合适数值
  }

  .el-tree-node {
    position: relative;
    padding-left: 12px; // 缩进量
  }
  .el-tree-node__children {
    padding-left: 14px; // 缩进量
  }
  // 横线
  .el-tree-node::after {
    content: '';
    width: 24px;
    height: 20px;
    position: absolute;
    left: -3px;
    top: 12px;
    border-width: 1px;
    border-top: 1px solid #c8c9cc;
  }
  // 竖线
  .el-tree-node::before {
    content: '';
    height: 100%;
    width: 1px;
    position: absolute;
    // left: -3px;
    // top: -26px;
    border-width: 1px;
    border-left: 1px solid #c8c9cc;
  }
  // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
  & > .el-tree-node::after {
    border-top: none;
  }
  & > .el-tree-node::before {
    border-left: none;
  }
}
.el-tree-node__expand-icon.is-leaf {
  display: none;
}

.el-tree-node:focus > .el-tree-node__content {
  background-color: transparent; //背景色
  cursor: default;
}

.el-tree-node__content {
  &:hover {
    background: transparent;
    cursor: default;
  }
}
</style>
